<template>
	<xbd-pages-content title="访客记录">
		<template #content>
			<view class="content">
				<view class="visitors-record">
					<view class="header">
						<xbd-wide-card :title="queryInfo.type === 'all' ? '全部访客' : '我的访客'" :num="num"></xbd-wide-card>
						<view class="search">
							<!-- #ifdef APP-PLUS || H5 -->
							<picker mode="date" :value="date" fields="day" :start="startDate" :end="endDate" @change="bindDateChange">
							    <view class="date">
									<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
									<text>{{ date }}</text>
								</view>
							</picker>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS || H5 -->
							<xbd-date-pick fields="day" :date="date" :visible.sync="visible" @setDate="setDate">
								<template>
									<view class="date" @click="visible = true">
										<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
										<text>{{ date }}</text>
									</view>
								</template>
							</xbd-date-pick>
							<!-- #endif -->
							<uni-easyinput v-model="keyword" placeholder="访客姓名进行查询" placeholderStyle="color: #999999;"></uni-easyinput>
							<image src="@/static/images/common/search.svg" class="search-svg" @click="search"></image>
						</view>
					</view>
					<view class="list">
						<uni-list border=false v-if="list.length">
							<view class="">
								<xbd-visitor-list :myInfo="item" v-for="item in list" :key="item._id" @clickVisitorCard="clickVisitorCard(item._id)"></xbd-visitor-list>
							</view>
							<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
						</uni-list>
					</view>
					
				</view>
				<uni-load-more
					v-if="loading"
					status="loading"
					:iconSize="12"
					:contentText="{
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '到底了~'
				}"></uni-load-more>
				<xbd-null-list v-if="!list.length && !loading"></xbd-null-list>
			</view>
			
		</template>
	</xbd-pages-content>
</template>

<script>
	import { mapState } from 'vuex';
	import { Visitor } from '@/api/index.js';
	export default {
		data() {
			return {
				msg:'',
				date: '请选择日期',
				total: 0,
				num: 0,
				statusNum: 2,
				isLoadMore: false,
				list: [],
				visible: false,
				loading: false,
				keyword: '',
				queryInfo: {
					page: 0,
					perpage: 10,
					keyword: '',
					date: '',
					type: 'apply'
				}
			};
		},
		onReachBottom() {
			// 上拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		},
		methods: {
			clickVisitorCard(id){
				uni.navigateTo({
					url: `./approvaldetail?id=${id}&title=访客详情&type=1`,
				})
			},
			// 加载更多
			loadmore() {
				this.queryInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			bindDateChange: function(e) {
			    this.date = e.target.value;
			},
			setDate(date) {
				this.date = date;
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
					
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			async loadmoreList() {
				try {
					// this.$showLoading('加载中');
					const res = await Visitor.getVisitorList(this.queryInfo);
					console.log(res)
					// uni.hideLoading();
					if (res.success) {
						this.total = res.data.total;
						this.list = this.list.concat(res.data.list);
						if (res.data.list.length === this.queryInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch(e) {
					// uni.hideLoading();
					this.queryInfo.page--;
					this.statusNum = 0;
					// console.log(e);
				}
			},
			async search() {
				/*
					* 点击搜索时 先隐藏上拉加载组件
					* 然后将分页置为第一页
					* 最后 对表单数据进行赋值
				*/
			   this.list = [];
				this.isLoadMore = false;
				this.queryInfo.page = 0;
				this.queryInfo.keyword = this.keyword;
				if (this.date !== '请选择日期') {
					this.queryInfo.date = this.date;
				}
				try {
					// this.$showLoading('加载中');
					this.loading = true;
					const res = await Visitor.getVisitorList(this.queryInfo);
					 // console.log(res);
					 this.loading = false;
					// uni.hideLoading();
					if (res.success) {
						this.total = res.data.total;
						this.list = res.data.list;
						if (res.data.list.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
					console.log(e);
				}
			},
			async init() {
				try {
					// this.$showLoading('加载中');
					this.loading = true;
					const res = await Visitor.getVisitorList(this.queryInfo);
					console.log(res)
					// uni.hideLoading();
					this.loading = false;
					if (res.success) {
						this.total = res.data.total;
						this.num = res.data.total;
						this.list = res.data.list;
						if (res.data.list.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
					console.log(e);
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
			startDate() {
			    return this.getDate('start');
			},
			endDate() {
			    return this.getDate('end');
			}
		},
		onLoad(res) {
			console.log(res)
			this.queryInfo.type = res.isMyVisitor
		},
		onShow() {
			this.queryInfo.page = 0
			this.init();
			uni.pageScrollTo({
			    scrollTop: 0,
			});
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-chat__content-title {
		font-size: 14px;
		
		color: $uni-color-primary;
	}
	::v-deep .uni-easyinput {
		width: 330rpx;
		height: 32px;
		margin-right: 20rpx;
		
		font-size: 28rpx;
		
		color: $uni-text-color;
	}
	::v-deep .uni-easyinput__content {
		min-height: 32px;
	}
	::v-deep .uni-easyinput__content-input {	
		font-size: 28rpx;
	}
	::v-deep .uni-list-chat__container {	
		padding: 50rpx !important;
	}
	::v-deep .uni-list--border-bottom{
		height: 0 !important;
	}
	::v-deep .uni-list {	
		background-color: #F8F8F8 !important;
	}
	.visitors-record {
		.header{
			padding: 20px 50rpx;
			
			background-color: #FFFFFF;
		}
		.list{
			width: 750rpx;
			background-color: #F8F8F8;
		}
		.bottom{
			margin-top: 20rpx;
		}
		.v-tabs {
			margin-bottom: 10px;
		}
		.xbd-wide-card{
			margin-bottom: 20px;
		}
		.search {
			display: flex;
			align-items: center;
			margin: 20px 0 0;
			.date {
				display: flex;
				align-items: center;
				width: 240rpx;
				height: 32px;
				margin-right: 20rpx;
				border: 1px solid #E9ECF7;
				
				font-size: 28rpx;
				
				color: #999;
				
				box-sizing: border-box;
				.date-img {
					width: 32rpx;
					height: 32rpx;
					margin: 0 20rpx;
				}
			}
			.search-svg {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.total {
			margin-bottom: 40rpx;
			
			font-size: 28rpx;
			
			color: #999999;
		}
		.contents {
			display: flex;
		}
		.res {
			margin-right: 20rpx;
			
			font-size: 24rpx;
			
			color: #999999;
		}
		.node {
			font-size: 24rpx;
			width: 300rpx;
			overflow: hidden;/*超出部分隐藏*/
			text-overflow:ellipsis;/* 超出部分显示省略号 */
			white-space: nowrap;/*规定段落中的文本不进行换行 */
			color: $uni-text-color;
		}
	}
</style>
